<template>
  <div>
    <!-- 头 -->
    <div class="D8head">
      <img src="../assets/img/返回箭头.png" alt="" />
      <span>交易详情</span>
    </div>
    <!-- 详情 -->
    <div class="D8particular">
      <div class="D8particular1">
        <div>{{ this.$route.params.money }}</div>
        <div>交易金额(元)</div>
      </div>
      <div class="D8particular21">
        <div class="D8particular2">
          <div>基金名称</div>
          <div>{{ this.$route.params.fundname | message }}</div>
          <div>{{ this.$route.params.number }}</div>
        </div>
        <div class="D8particular2">
          <div>交易时间</div>
          <div>{{ this.$route.params.time }}</div>
        </div>
        <div class="D8particular2">
          <div>购买数量</div>
          <div>{{ this.$route.params.sum }}</div>
        </div>
        <div class="D8particular2">
          <div>交易状态</div>
          <div>认购已扣款份额待确认</div>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="D8but" @click="average">卖出</div>
    <van-dialog
      v-model="showa"
      title="请输入你要卖出的数量"
      show-cancel-button
      @confirm="confirm"
      class="D81"
    >
    <input type="text" v-model="num" class="D8numberm">
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from "vant";
// 接口
import { trading } from "../api/TradingParticulars";
// 消息通知
import { Notify } from 'vant';
export default {
  data() {
    return {
        showa: false,
        num:""
    };
  },
  methods: {
    average() {
        this.showa = true;
    },
    confirm(){
        console.log(this.num);
        trading({ fundNo: this.$route.params.number ,num:this.num}).then((res)=>{
            if(res.code == 200){
                Notify({ type: 'success', message: "已成功卖出" });
            }else{
              Dialog({title: '温馨提示', message: res.mag });
            }
        }).catch((err)=>{
            console.log(err);
        });
    }
  },
  // 过滤器
  filters: {
    message(val) {
      if (val.length <= 10) {
        return val;
      }
      return val.slice(0, 10) + "...";
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Notify.Component.name]: Notify.Component,
  },
};
</script>

<style src="../assets/css/TradingParticulars.css">
</style>